<template>
  <div class="partItem partItem3">
    <div class="studyTab">
      <p v-for="(item,index) in studyTab" @click.stop="choiseStudyTab(index)" :class="{'active':defaultIndex==index}">
        <span>{{item}}</span>
      </p>
    </div>
    <div class="blank">

    </div>
    <div class="studyContentTab" v-if="hasData">
      <div class="studyItem" >
        <a >
          <router-link :to="{path:'/videoList',query:{class_id:item.id}}" v-for="(item,index) in videoList" :key="index">
          <div class="studyList">
            <img :src=item.thumb alt="" class="studyLeft" onerror="this.onerror=null; this.src='../../static/images/codeCover2.jpg'">
            <div class="studyRight">
              <p class="studyTitle">{{item.name}}</p>
              <p class="studyProgress">完成<span style="color: #e83329;">{{item.percent}}</span> | 剩余{{item.residue}}课时</p>
              <p class="studyDeadLine">截止至{{item.last_time}}</p>
            </div>
          </div>
          </router-link>
        </a>
      </div>
      <div class="loadComponent">
        <div class="weui-loadmore weui-loadmoreIng" v-if="loadmoreClick">
          <i class="weui-loading"></i>
          <span class="weui-loadmore__tips" >正在加载</span>
        </div>
        <div class="weui-loadmore weui-loadmore_line" v-if="nomoreData">
          <span class="weui-loadmore__tips">到底了</span>
        </div>
        <div class="loadMore" style="display:block" @click.stop="loadMore" v-if="moreData">
          更多
        </div>
      </div>
      <div id="loadingToast" v-if="showLoading">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
          <i class="weui-loading weui-icon_toast"></i>
          <p class="weui-toast__content">数据加载中</p>
        </div>
      </div>
    </div>
    <div class="noData" v-if="noData">
      <img src="https://api.cloudcpc.com/static/index/images/noData.png" alt="">
    </div>
  </div>
</template>
<script>
  import {mapState,mapMutations} from 'vuex'
  export default({
    data (){
        return {
            defaultIndex:0,
            studyTab:['学习中','已完成'],
            type:1,
            videoList:[],
            hasData:true,
            noData:false,
           nomoreData:false,
           loadmoreClick:false,
           moreData:true,
           showLoading:false,
           defaultPage:1
        }
    },
    computed:{
      ...mapState({
        uid:state =>state.app.loginState.uid ||localStorage.getItem('uid')
      })
    },
    methods:{
      ...mapMutations(['setpartDefault']),
      choiseStudyTab(index){
          this.defaultIndex =index
          this.type = index+1
          this.showLoading =true
          this.initData(this.type)
      },
      loadMore (){
        this.loadmoreClick =!this.loadmoreClick
        this.moreData =false
        this.defaultPage ++
        setTimeout(()=>{
            this.loadmoreClick =false
            this.nomoreData =true
        },1500)
//        this.fetchData(this.$route.query.id,this.defaultPage)
      },
      initData(type){
        this.videoList =[]
        this.noData =false
        this.hasData =true
          this.axios.get('/home/School/getUserClass?'+`${this.baseUrl}`,{
              params:{
                  uid:this.uid,
                  type:type,
              }
          })
            .then((res)=>{
              if(res.data.code==1){
                  this.showLoading =false
                    //有数据
                  if(res.data.data.length>0){
                    this.videoList =res.data.data
                  }else if(res.data.data.length==0){
                      this.noData =true
                      this.hasData =false
                  }
              }
//              console.log(res.data)
            })
            .catch((res)=>{
              console.log(res.error)
            })
      }
    },
    mounted(){
        this.initData(this.type)
        this.setpartDefault(2)
    }
  })
</script>
<style scoped="">
  .partItem3{
    /*background: #f9f5f5;*/
    height: 100%;
  }
  .studyTab{
    height: 0.82rem;
    line-height: 0.82rem;
    font-size: 0;
    background: #ffffff;
  }
  .studyTab p{
    display: inline-block;
    width: 50%;
    text-align: center;
    font-size: 0.32rem;
    color: #999999;
  }
  .studyTab p.active span{
    display: inline-block;
    height: 0.8rem;
    color:#e83329 ;
    border-bottom: 0.02rem solid #e83329;
  }
  .partItem3{
    /*background: #f9f5f5;*/
  }
  .studyContentTab{
    margin-top: 0.1rem;
    background: white;
    padding:  0 0.32rem;
  }

  .studyItem.active{
    display: block;
  }
  .studyList:nth-child(1){
    padding-top: 0.4rem;
  }
  .blank{
    background: #f9f5f5;
    height:0.1rem;
  }
  .studyList{
    padding-bottom: 0.4rem;
    font-size: 0;
  }
  .studyLeft{
    display: inline-block;
    width: 2.4rem;
    height: 1.8rem;
    margin-right: 0.3rem;
    vertical-align: top;
  }
  .studyRight{
    display: inline-block;
    width: 4.1rem;
    vertical-align: top;

  }
  .studyTitle{
    min-height: 0.88rem;
    font-size: 0.32rem;
    color: #333333;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .studyProgress{
    font-size: 0.28rem;
    color: #333333;
    padding-bottom: 0.1rem;

  }
  .studyProgress span{
    color: #e83329;
  }
  .studyDeadLine{
    font-size: 0.22rem;
    color: #999999;
  }
  .noData{
    text-align: center;
    width: 100%;
    height: 100%;
  }
  .noData img{
    position: absolute;
    left: 0;
    top:0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

  /*.partItem3{*/
    /*height: calc(100% - 0.8rem - 40px);*/
  /*}*/


</style>
